import AbstractGenerateVjson from 'mars-pro/src/pro/vjson/AbstractGenerateVjson'

export default class SingleFormGenerateVjson extends AbstractGenerateVjson {
    constructor(datas, options) {
        super(datas, options)
    }
    /**
     * 获取所有的ProFormList，用于构建formModel
     * @param { } datas 
     * @param {*} res 
     */
    findProFormList(datas, res) {
        datas = datas || []
        datas = Array.isArray(datas) ? datas : [datas]
        for (let i = 0; i < datas.length; i++) {
            const d = datas[i];
            if (d.tag === 'pro-form-list') {
                res.push(d)
            }
            if (d.children) {
                this.findProFormList(d.children, res)
            }
        }
    }

    /**
        * 抽象方法: 处理name
        */
    onHookName() {
        return ''
    }
    /**
     * 抽象方法: 处理vnode class
     */
    onHookClasses() { }
    /**
    * 抽象方法: 处理vnode style
    */
    onHookStyles() { }
    /**
    * 抽象方法: 处理vnode data状态
    */
    onHookDatas() {
        const formModel = {}
        const proForlLists = []
        this.findProFormList(this.datas, proForlLists)
        for (let i = 0; i < proForlLists.length; i++) {
            const f = proForlLists[i];
            formModel[':' + f.props.prop] = []
        }
        return {
            ':form': formModel
        }
    }
    /**
     * 抽象方法: 处理vnode props
     */
    onHookProps() { }
    /**
    * 抽象方法: 处理vnode watch
    */
    onHookWatchs() { }
    /**
    * 抽象方法: 处理vnode methods
    */
    onHookMethods() { }
    /**
    * 抽象方法: 处理vnode datasource mixins
    */
    onHookDataSources() { }
    /**
     * 根节点
     * @returns 
     */
    onHookRootWapper() {
        const columnCount = this.options.columnCount || 3
        //布局
        const layout = {
            tag: 'pro-layout-contaner',
            props: {
                ':enableBottomGutter': false,
                ':columnCount': columnCount
            },
            attrs: {
                ':gutter': 10
            },
            slots: {
                default: []
            }
        }

        const vnode = {
            tag: 'el-form',
            props: {
                ':model': 'form'
            },
            ref: 'form',
            slots: {
                default: [
                    layout
                ]
            }
        }
        return (childrenVnodes) => {
            layout.slots.default = Array.isArray(childrenVnodes) ? childrenVnodes : [childrenVnodes]
            return vnode
        }
    }
    /**
     * 抽象方法: 创建vnode data
     * @return vnode
     */
    onHookTemplateVnode(row) {
        //表单
        if (!row || (!row.uiType && !row.tag)) {
            return
        }
        const uiType = row.uiType

        let tag = row.tag;

        let props = {
            ...(row.props || {})
        };
        let attrs = {
            ...(row.attrs || {}),
            'data-vsetting': true
        };
        let slots = {
            ...(row.slots || {})
        };
        let scopedSlots = {
            ...(row.scopedSlots || {})
        };
        let on = {
            ...(row.on || {})
        };
        let style = row.style || {};
        let _class = row['class'] || {};
        let vIf = row['v-if'];
        let vShow = row['v-show'];
        let vFor = Object.keys(row || {}).filter(r => r.indexOf('v-for(') > -1)[0]
        if (vFor) {
            vFor = [vFor, row[vFor]]
        }

        //form表单
        if (uiType && (uiType.indexOf('input-') > -1 || uiType.indexOf('select-') > -1)) {
            tag = uiType.indexOf('input-') > -1 ? 'pro-input' : 'pro-select'
            const _uiType = tag === 'pro-input' ? uiType.substr('input-'.length) : uiType.substr('select-'.length)
            props = {
                ['v-model']: 'form.' + (row.prop || 'prop'),
                ...row,
                ...props,
                uiType: _uiType,
            }
        } else {
            tag = tag
            props = {
                ...props
            }
        }
        Object.assign(attrs, props)

        return {
            tag,
            props,
            attrs,
            'class': _class,
            on,
            slots,
            scopedSlots,
            style,
            'v-if': vIf,
            'v-show': vShow,
            ...(
                vFor && vFor.length == 2 ? { [vFor[0]]: vFor[1] } : {}
            )
        }
    }
}